<template>
	<section>		
		<el-col :span="24">
			<el-breadcrumb separator=">">
			  <el-breadcrumb-item :to="{ path: '/coursecontent?id='+$route.query.id }" v-if="role=='teacher'">课程内容</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/stucoursecontent?id='+$route.query.id }" v-else>课程内容</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/coursecontent?id='+$route.query.id }" v-if="role=='teacher'">
			  	<span v-if="$route.query.stage==1">创业基础课程</span>
			  	<span v-if="$route.query.stage==2">案例分析课程</span>
			  	<span v-if="$route.query.stage==3">沙盘推演课程</span>
			  	<span v-if="$route.query.stage==4">项目路演课程</span>
			  </el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/stucoursecontent?id='+$route.query.id }" v-else>
			  	<span v-if="$route.query.stage==1">创业基础课程</span>
			  	<span v-if="$route.query.stage==2">案例分析课程</span>
			  	<span v-if="$route.query.stage==3">沙盘推演课程</span>
			  	<span v-if="$route.query.stage==4">项目路演课程</span>
			  </el-breadcrumb-item>			  
			  <el-breadcrumb-item>{{UnitInfo.name}}</el-breadcrumb-item>
			</el-breadcrumb>			
		</el-col>
		<div v-if="$route.query.stage==1||$route.query.stage==2">				
			<el-col :span="20" :offset="2">
				<h1 style="text-align: center;margin: 20px 0;font-size:18px;">{{UnitInfo.name}}</h1>
				<div :span="24" >
					<h1>教案</h1>
					<el-collapse v-model="activeName" >
						<div v-for="(el,index) in UnitInfo.vplans" v-on:click="schedule('plan',el.vplanId)">			
						  <el-collapse-item  v-bind="{'title':el.name,name:index}" >
						    <div v-html="el.content" v-if="!el.path"></div>
							<iframe :src="el.path" v-if="el.path" width="100%" height="600px">
							 This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf" rel="external nofollow" >Download PDF</a>
							</iframe>				    
						  </el-collapse-item>
					  </div>
					</el-collapse>				
				</div>
				<el-row :gutter="20" style="margin: 30px 0;">
					<h1>视频</h1>
					<el-col  :span="6" v-for="el in UnitInfo.vvideos" style="margin-bottom: 10px;">
					    <el-card  :body-style="{ padding: '0px' }" class="video-box" >
					      <p class="iconfont icon-luyanzhongxin"  v-on:click="lookvideo(el.path,el.vvideoId)" ></p>
					      <div class="video-imgbox">
					      	<img v-bind:src="el.thumbnailPath" style="width: 100%;height: 100%;" class="image">
					      </div>
					      <div style="padding: 14px;">
					        <span>{{el.name}}</span>
					        <div class="bottom clearfix">
					        </div>
					      </div>
					    </el-card>
					</el-col>			
				</el-row>	
				<el-row :gutter="20" style="margin: 30px 0;" v-if="$route.query.stage==2">
					<h1 >图纸</h1>
					<el-col  :span="6" v-for="el in UnitInfo.vdrawings" style="margin-bottom: 10px;">
						<div class="coursetags" v-on:click="showDislog(el,el.vdrawingId)">
							<el-tag type="success" >{{el.name}}</el-tag>						
						</div>
					</el-col>			
				</el-row>		
				<el-row :gutter="20" style="margin: 30px 0;">
					<h1 >作业</h1>
					<el-col  :span="24" v-for="el in UnitInfo.vproblems" style="margin-bottom: 10px;">
						<div v-if="el.type==1">
							<el-form ref="el" :model="el" label-width="80px">
								<el-form-item  label="问题:">
									{{el.question}}<span style="color: red;float: right;">(满分{{el.score}}分)</span>
								</el-form-item>
							</el-form>
							<el-form ref="el" :model="el" label-width="80px">
								<el-form-item  label="回答:">
									<el-input v-model="el.answer" :disabled="role!='student'||stupass"  type="textarea"></el-input>
								</el-form-item>
							</el-form>	
							<el-form v-if="scoreShow">
								<el-form-item  label="本题得分：" label-width="120px" style="color: red;">
									{{el.problemScore}}分
								</el-form-item>		
								<el-form-item  v-if="scoreShow" label="评语：" label-width="120px" style="color: red;">
									{{el.remark}}
								</el-form-item>									
							</el-form>
						</div>
						<div v-if="el.type==2">
							<el-form ref="el" :model="el" label-width="80px">
								<el-form-item  label="问题:">
									{{el.question}}<span style="color: red;float: right;">(满分{{el.score}}分)</span>
								</el-form-item>
								<el-form-item ref="el" label="回答:" :model="el" >
								    <el-radio-group v-model="el.answer" :disabled="role!='student'||stupass" >
								      <el-radio label="A">{{el.optionA}}</el-radio></br></br>
								      <el-radio label="B">{{el.optionB}}</el-radio></br></br>
								      <el-radio label="C">{{el.optionC}}</el-radio></br></br>
								      <el-radio label="D">{{el.optionD}}</el-radio></br></br>
								      <el-radio v-if="el.optionE" label="E">{{el.optionE}}</el-radio></br></br>
								      <el-radio v-if="el.optionF" label="F">{{el.optionF}}</el-radio>
								    </el-radio-group>
								</el-form-item>	
								<el-form-item v-if="scoreShow"  label="本题得分：" label-width="120px" style="color: red;">
									{{el.problemScore}}分
								</el-form-item>		
								<el-form-item v-if="scoreShow" label="正确答案：" label-width="120px" style="color: red;">
									{{el.correctAnswer}}
								</el-form-item>										
							</el-form>
						</div>		
						<div v-if="el.type==3">
							<el-form ref="el" :model="el" label-width="80px">
								<el-form-item  label="问题:">
									{{el.question}}<span style="color: red;float: right;">(满分{{el.score}}分)</span>
								</el-form-item>
								<el-form-item ref="el" label="回答:" :model="el" >
								    <el-checkbox-group v-model="el.answer" >
								      <el-checkbox label="A" :disabled="role!='student'||stupass">{{el.optionA}}</el-checkbox></br>
								      <el-checkbox label="B" :disabled="role!='student'||stupass">{{el.optionB}}</el-checkbox></br>
								      <el-checkbox label="C" :disabled="role!='student'||stupass">{{el.optionC}}</el-checkbox></br>
								      <el-checkbox label="D" :disabled="role!='student'||stupass">{{el.optionD}}</el-checkbox></br>
								      <el-checkbox v-if="el.optionE" label="E" :disabled="role!='student'||stupass">{{el.optionE}}</el-checkbox></br>
								      <el-checkbox v-if="el.optionF" label="F" :disabled="role!='student'||stupass">{{el.optionF}}</el-checkbox>
								    </el-checkbox-group>
								</el-form-item>	
								<el-form-item v-if="scoreShow" label="本题得分：" label-width="120px" style="color: red;">
									{{el.problemScore}}分
								</el-form-item>		
								<el-form-item v-if="scoreShow" label="正确答案：" label-width="120px" style="color: red;">
									{{el.correctAnswer}}
								</el-form-item>										
							</el-form>
						</div>		
						<div v-if="el.type==4">
							<el-form ref="el" :model="el" label-width="80px">
								<el-form-item  label="问题:">
									{{el.question}}<span style="color: red;float: right;">(满分{{el.score}}分)</span>
								</el-form-item>
								<el-form-item ref="el" label="回答:" :model="el" >
						    	    <el-radio-group v-model="el.answer" size="medium" :disabled="role!='student'||stupass" >
								      <el-radio label="1" value="">正确</el-radio>
								      <el-radio label="0" value="">错误</el-radio>
								    </el-radio-group>
								</el-form-item>		
								<el-form-item  v-if="scoreShow" label="本题得分：" label-width="120px" style="color: red;">
									{{el.problemScore}}分
								</el-form-item>		
								<el-form-item v-if="scoreShow" label="正确答案：" label-width="120px" style="color: red;">
									{{el.correctAnswer==1?'正确':'错误'}}
								</el-form-item>											
							</el-form>
						</div>						
					</el-col>			
				</el-row>	
				<el-row :gutter="20" style="margin: 30px 0;" v-if="scoreShow">
					<h1 >小节总得分：<span style="color:red;">{{Stageinfo.unitScore}}分</span></h1>				
				</el-row>
						
			</el-col>
		</div>
		<div v-if="$route.query.stage==3">		
			<el-col :span="20" :offset="2">
				<h1 style="text-align: center;margin: 20px 0;font-size:18px;">{{UnitInfo.name}}</h1>
				
				<div :span="24" >
					<h1>项目基本信息</h1>
			        <div class="edit_container">
			          <quill-editor v-model="Tuistage.intro"
			                        ref="myQuillEditor"
			                        class="editer"
			                        :disabled="role!='student'&&teamRole!='ceo'" 
			                       >
			          </quill-editor>
			        </div>				
				</div>	
				<el-row :gutter="20" style="margin: 30px 0;">
					<h1 >图纸</h1>
					<el-col  :span="6" v-for="el in $store.state.courseInfo.courseStages[2].drawingTypeIds.split(',')" style="margin-bottom: 10px;">
						<div class="coursetags" v-on:click="showdrawDislog(el)">
							<el-tag type="success" v-if="el==1">消费者体验流程图</el-tag>	
							<el-tag type="success"  v-if="el==2">典型人物</el-tag>
							<el-tag type="success"  v-if="el==3">服务蓝图</el-tag>
							<el-tag type="success"  v-if="el==4">商业模式画布</el-tag>
							<el-tag type="success"  v-if="el==5">电梯演讲</el-tag>
							<el-tag type="success"  v-if="el==6">洞察分析</el-tag>
							<el-tag type="success"  v-if="el==7">思维导图</el-tag>						
						</div>
					</el-col>			
				</el-row>			
				<el-row :gutter="20" style="margin: 30px 0;" v-show="isInferCommitted!=1" >
					<h1 >上传沙盘推演及教师点评视频</h1>
					<el-upload
					  class="upload-demo"
					  drag
					  action="planupload"
					  :before-upload="beforeupload"
					  :file-list="TuifileList"
					  limit='1'
					  accept="video/*">
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</el-row>	
				<el-row :gutter="20" style="margin: 30px 0;"  v-show="isInferCommitted==1" >
					<h1>沙盘推演及教师点评视频</h1>
					<el-col style="margin-bottom: 10px;" :span="8">
					    <el-card  :body-style="{ padding: '0px' }" class="video-box" >
					      <p class="iconfont icon-luyanzhongxin"  v-on:click="lookvideo(Tuistage.inferVideoPath)" ></p>
					      <div class="video-imgbox">
					      </div>
					    </el-card>
					</el-col>		
				</el-row>	
				<el-form v-if="isInferPublished">
					<h1 >沙盘推演得分：</h1>
					<el-form-item  label="" label-width="120px" style="color: red;">
						{{Tuistage.inferScore}}分
					</el-form-item>		
					<h1 >沙盘推演评语：</h1>
					<el-form-item   label="" label-width="120px" style="color: red;">
						<div v-html="Tuistage.inferRemark"></div>
					</el-form-item>						
				</el-form>
			</el-col>		
		</div>
		<div v-if="$route.query.stage==4">
			
			<el-col :span="20" :offset="2">
				<h1 style="text-align: center;margin: 20px 0;font-size:18px;">{{UnitInfo.name}}</h1>
				
				<div :span="24" >
					<h1>项目基本信息</h1>
			        <div class="edit_container">
			          <quill-editor v-model="Roadstage.intro"
			                        ref="myQuillEditor"
			                        class="editer"
			                        :disabled="role!='student'&&teamRole!='ceo'" 
			                       >
			          </quill-editor>
			        </div>				
				</div>	
				<el-row :gutter="20" style="margin: 30px 0;" v-show="isRoadCommitted!=1">
					<h1 >上传路演PDF文件</h1>
					<el-upload
					  class="upload-demo"
					  drag
					  action="planupload"
					  :before-upload="roadpdfbeforeupload"
					  :file-list="Roadstage.pdfFileList"
					  limit='1'
					  accept="pdf/*">
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</el-row>				
				<el-row :gutter="20" style="margin: 30px 0;"  v-show="isRoadCommitted!=1">
					<h1 >上传路演推演及教师点评视频</h1>
					<el-upload
					  class="upload-demo"
					  drag
					  action="planupload"
					  :before-upload="roadvideobeforeupload"
					  :file-list="Roadstage.videoFileList"
					  limit='1'
					  accept="video/*">
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</el-row>	
				<el-row :gutter="20" style="margin: 30px 0;"  v-show="isRoadCommitted==1" >
					<h1>路演PDF文件</h1>
					<el-col style="margin-bottom: 10px;" :span="24">
						<iframe :src="Roadstage.roadPdfPath" width="100%" height="600px">
						 This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf" rel="external nofollow" >Download PDF</a>
						</iframe>
					</el-col>		
				</el-row>				
				<el-row :gutter="20" style="margin: 30px 0;"  v-show="isRoadCommitted==1" >
					<h1>路演推演及教师点评视频</h1>
					<el-col style="margin-bottom: 10px;" :span="8">
					    <el-card  :body-style="{ padding: '0px' }" class="video-box" >
					      <p class="iconfont icon-luyanzhongxin"  v-on:click="lookvideo(Roadstage.roadVideoPath)" ></p>
					      <div class="video-imgbox">
					      </div>
					    </el-card>
					</el-col>		
				</el-row>	
				<el-form  v-if="isRoadPublished" >
					<h1 >项目路演得分：</h1>
					<el-form-item label="" label-width="120px" style="color: red;">
						{{Roadstage.roadScore}}分
					</el-form-item>	
					<h1 >项目路演评语：</h1>
					<el-form-item label="" label-width="120px" style="color: red;">
						<div v-html="Roadstage.roadRemark"></div>
					</el-form-item>		
				</el-form>
			</el-col>		
		</div>		
		<el-dialog  title="查看视频" :fullscreen="false" custom-class="videodialog"  v-model="lookVisible" :close-on-click-modal="false">	
			<template>
				<video width="100%"  v-bind:src="path" height="" controls>
				</video>
			</template>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="lookVisible = false">关闭</el-button>
			</div>
		</el-dialog>	
		<el-dialog  title="图纸" v-dialogDrag custom-class="drawdislog" v-model="addFormVisible">	
			<el-button @click="getHistory"  v-if="role=='student'&&teamRole=='ceo'" >查看图纸历史版本</el-button>
			<el-dialog title="图纸历史版本" :modal="false" v-model="HistoryVisible">		
				<el-table :data="DrawHistoryList" highlight-current-row  style="width: 100%;">
					<el-table-column prop="createTime" label="版本历史时间" >
					</el-table-column>		
					<el-table-column prop="birth"label="操作" >
						<template scope="scope">
							<el-button size="small" type="success" @click="changeDraw(scope.row)">切换图纸</el-button>
						</template>					
					</el-table-column>
				</el-table>			
				<!--工具-->
				<el-col :span="24" class="toolbar">
					<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
					</el-pagination>
				</el-col>	
			</el-dialog>
			<template>
				<dians v-if="drawingTypeId==2" :tochild="Drawdian" ref="dianss"></dians>
				<fenxi v-if="drawingTypeId==6" :tochild="Drawfenxi" ref="dianss"></fenxi>
				<lantu  v-if="drawingTypeId==3":tochild="Drawlantu" ref="dianss"></lantu>
				<shangye v-if="drawingTypeId==4" :tochild="Drawshangye" ref="dianss"></shangye>
				<yanjiang v-if="drawingTypeId==5" :tochild="Drawyanjiang" ref="dianss"></yanjiang>
				<tiyan v-if="drawingTypeId==1" :tochild="Drawtiyan" ref="dianss"></tiyan>
				<iframe v-show="drawingTypeId==7"  v-bind:src="'http://www.zcxy360.com/sandtable/naotu/index.html?use='+use" width="100%" height="1200px" id="naotu"></iframe>						
			</template>					
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">关闭</el-button>
				<el-button v-if="role=='student'&&teamRole=='ceo'" type="primary" @click.native="click">保存</el-button>			
			</div>				
		</el-dialog>	
		<el-col :span="24" style="text-align: center;" v-show="role=='student'&&!stupass&&$route.query.stage==1">
			<el-button type="warning" @click.native="Submitwork">作业提交</el-button>
		</el-col>
		<el-col :span="24" style="text-align: center;" v-show="role=='student'&&!stupass&&$route.query.stage==2">
			<el-button type="warning" @click.native="Submitwork">作业提交</el-button>
		</el-col>		
		<el-col :span="24" style="text-align: center;" v-show="teamRole=='ceo' && $route.query.stage==3 && isInferCommitted!=1">
			<el-button type="warning" @click.native="SubmitTuistage" :loading="Tuiloading">作业提交</el-button>
		</el-col>	
		<el-col :span="24" style="text-align: center;" v-show="teamRole=='ceo'&&$route.query.stage==4&isRoadCommitted!=1">
			<el-button type="warning" @click.native="SubmitRoadstage" :loading="Roadloading">作业提交</el-button>
		</el-col>			
	</section>
</template>

<script>
	import {coursunitget,coursgetstage,courseWorkput,courseGetworkself,scheduleVido,scheduleDraw,schedulePlan,courseStudent,courseTuiput,courseTeamSelf,courseRoadput,courseStucontent,drawHistrory,drawHistroryPost} from '../../api/api'
	import dian from '../draw/dian.vue';
	import fenxi from '../draw/fenxi.vue';
	import lantu from '../draw/lantu.vue';
	import shangye from '../draw/shangye.vue';
	import yanjiang from '../draw/yanjiang.vue';
	import tiyan from '../draw/tiyan.vue';
	import { quillEditor } from 'vue-quill-editor' //调用编辑器
	 export default {
	 	data(){
	 		return{
	 			activeName:"0",
	 			courseStages:[],
	 			UnitInfo:{},
	 			Stageinfo:{},
	 			lookVisible:false,
	 			loading:false,     
	 			Tuiloading:false,
	 			HistoryVisible:false,
	 			Roadloading:false,
	 			addFormVisible:false,
	 			path:"",
				Drawdian:{
					use:true,
					content:""
				},
				Drawfenxi:{
					use:true,
					content:""
				},
				Drawlantu:{
					use:true,
					content:""
				},
				Drawshangye:{
					use:true,
					content:""
				},
				Drawyanjiang:{
					use:true,
					content:""
				},
				Drawtiyan:{
					use:true,
					content:""
				},
				Drawnaotu:{
					use:true,
					content:""
				},			
	 			drawingTypeId:"",
	 			role:"",
	 			DrawHistoryList:[],
	 			pageNum:'1',
	 			pageSize:'5',
	 			answerJson:[],
	 			stuquestion:[],
	 			stupass:false,
	 			scoreShow:false,
	 			Tuistage:{
	 				drawingJson:[],
	 				intro:"",
	 				isInferCommitted:1,
	 				inferVideoPath:"",
	 				inferRemark:"",
	 				inferScore:"",
	 			},
	 			Roadstage:{
	 				pdfFileList:[],
	 				videoFileList:[],
	 				intro:"",
	 				roadPdfPath:"",
	 				roadVideoPath:"",
	 				roadScore:"",
	 				roadRemark:""
	 			},
	 			Roadparam:"",
	 			teamId:"",
	 			teamRole:"",
	 			TuifileList:[],
	 			Tuiparam:"",
	 			isInferCommitted:"",
	 			isRoadCommitted:"",
				isInferPublished:false,
				isRoadPublished:false, 			
				teamDrawingCommits:[],
				ref:'',
				Websorcktdata:{
					info:"",
					teamdraw:{
						teamId:"",
						drawingTypeId:"",
						content:""
					}
				},
				use:"",
	 		}
	 	},
	 	components:{'dians':dian,'fenxi':fenxi,'lantu':lantu,'shangye':shangye,'yanjiang':yanjiang,'tiyan':tiyan,quillEditor},
	 	watch:{
          'ref':{
            handler:function (val, oldVal) {
              for (var key in val) {
                if (val.hasOwnProperty(key)) {
                  this.$emit('handleOn',{key:key,val:val[key]})
                }
              }
            },
            deep:true
           }
	 	},
	 	methods:{
		    skip(link,id,unitId,stage,userId,user){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			unitId:unitId,
		        			stage:stage,
		        			userId:userId
		        		}
		        	}
		        )
		    },	 	
		    getHistory:function(){
				this.getDrawHistroy(this.drawingTypeId);		    	
		    	this.HistoryVisible=true;
		    },
		    changeDraw:function(el){
				if(el.drawingTypeId=='1'){
					this.Drawtiyan.content=el.content;
				}
				if(el.drawingTypeId=='2'){
					this.Drawdian.content=JSON.parse(el.content);
				}
				if(el.drawingTypeId=='3'){
					this.Drawlantu.content=JSON.parse(el.content);
				}
				if(el.drawingTypeId=='4'){
					this.Drawshangye.content=JSON.parse(el.content);
				}	
				if(el.drawingTypeId=='5'){
					this.Drawyanjiang.content=JSON.parse(el.content);
				}	
				if(el.drawingTypeId=='6'){
					this.Drawfenxi.content=JSON.parse(el.content);
				}		
				if(el.drawingTypeId=='7'){
					this.use=0;						
					localStorage.setItem('Drawnaotu',el.content);		
				}			    	
		    },
		    schedule:function(type,id){
		    	var param=new URLSearchParams();
		    	param.append('courseId',this.$route.query.id);
		    	param.append('unitId',this.$route.query.unitId);
		    	if(type=='plan'){
		    		param.append('vplanId',id)
					schedulePlan(param).then()		    		
		    	}
		    	if(type=='draw'){
		    		param.append('vdrawingId',id)
					scheduleDraw(param).then()		    		
		    	}
		    	if(type=='video'){
		    		param.append('vvideoId',id)
					scheduleVido(param).then()		    		
		    	}		    	
		    },
			showdrawDislog:function(el){
				if(el=='1'){
					this.Drawtiyan.content=this.Drawtiyan.content;
				}
				if(el=='2'){
					this.Drawdian.content=this.Drawdian.content;
				}
				if(el=='3'){
					this.Drawlantu.content=this.Drawlantu.content;
				}
				if(el=='4'){
					this.Drawshangye.content=this.Drawshangye.content;
				}	
				if(el=='5'){
					this.Drawyanjiang.content=this.Drawyanjiang.content;
				}	
				if(el=='6'){
					this.Drawfenxi.content=this.Drawfenxi.content;
				}		
				if(el=='7'){
					if(this.$route.query.isCommitted==0){
						this.use=0;					
					}else{
						this.use=1;				
					}
					if(this.teamRole=='ceo'){
						this.use=2;
					}
				}					
				this.drawingTypeId=el;
				this.getDrawHistroy(this.drawingTypeId);
				this.addFormVisible=true;			
			},	
            beforeupload(file) {
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;
                var videoname= file.name;     
                let onevideo={name:videoname,url:windowURL.createObjectURL(file)};
                this.TuifileList=[];
                this.TuifileList.push(onevideo);
                //重新写一个表单上传的方法
                this.Tuiparam = new FormData();
                this.Tuiparam.append('file', file, file.name);
                return false;
            },		
 			handleCurrentChange(val) {
				this.pageNum = val;
				this.getDrawHistroy(this.drawingTypeId);
			},           
            roadpdfbeforeupload(file) {
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;
                var videoname= file.name;     
                let onevideo={name:videoname,url:windowURL.createObjectURL(file)};
                this.Roadstage.pdfFileList=[];
                this.Roadstage.pdfFileList.push(onevideo);
                //重新写一个表单上传的方法
                this.Roadparam.append('pdfFile', file, file.name);
                return false;
            },
            roadvideobeforeupload(file) {
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;
                var videoname= file.name;     
                let onevideo={name:videoname,url:windowURL.createObjectURL(file)};
                this.Roadstage.videoFileList=[];
                this.Roadstage.videoFileList.push(onevideo);
                //重新写一个表单上传的方法
                this.Roadparam.append('videoFile', file, file.name);
                return false;
            },  
			//获取项目列表
			getDrawHistroy: function (drawingTypeId) {
				let params={pageNum:this.pageNum,pageSize:this.pageSize,teamId:this.teamId,drawingTypeId:drawingTypeId};
				drawHistrory(params).then((res) => {
					this.total=res.total;					
					this.DrawHistoryList = res.list;
				});	
			},            
            drawPost:function(teamId,drawingTypeId,content){
		    	var param=new URLSearchParams();
		    	param.append('teamId',teamId);
		    	param.append('drawingTypeId',drawingTypeId); 
		    	param.append('content',content); 
				drawHistroryPost(param)     	
            },
			showDislog:function(el,id){
				if(id){
					this.schedule('draw',id)
				}
				if(el.drawingTypeId=='1'){
					this.Drawtiyan.content=el.content;
				}
				if(el.drawingTypeId=='2'){
					this.Drawdian.content=JSON.parse(el.content);
				}
				if(el.drawingTypeId=='3'){
					this.Drawlantu.content=JSON.parse(el.content);
				}
				if(el.drawingTypeId=='4'){
					this.Drawshangye.content=JSON.parse(el.content);
				}	
				if(el.drawingTypeId=='5'){
					this.Drawyanjiang.content=JSON.parse(el.content);
				}	
				if(el.drawingTypeId=='6'){
					this.Drawfenxi.content=JSON.parse(el.content);
				}		
				if(el.drawingTypeId=='7'){
					this.use=0;						
					localStorage.setItem('Drawnaotu',el.content);		
				}		
				this.drawingTypeId=el.drawingTypeId;
				this.addFormVisible=true;
			},	 		
			lookvideo:function(path,id){
				if(id){
					this.schedule('video',id)
				}
				this.path=path;
				this.lookVisible=true;
			},
			getTeam:function(teamId){	
				var _this=this;
				courseTeamSelf(teamId).then((res) =>{
					_this.isInferCommitted=res.isInferCommitted;
					if(res.isInferCommitted==1){
						_this.teamRole='c'
					}
					_this.isRoadCommitted=res.isRoadCommitted
				});				
			},						
			click:function(){
				this.$nextTick(() => {
					var _this=this;
					var pass=0;
					var index='';
					var teamdraw={teamId:this.teamId,drawingTypeId:this.drawingTypeId,content:""}
					if(this.Tuistage.drawingJson.length>0){
						$.each(_this.Tuistage.drawingJson, function(e,value) {
							if(_this.drawingTypeId==value.drawingTypeId){
								pass=1;
								index=e
							}
						});
					}
					if(this.drawingTypeId=='1'){
						this.Drawtiyan.content=this.$refs.dianss.myDiagram.model.toJson();
						teamdraw.content=this.$refs.dianss.myDiagram.model.toJson();
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}				
					}
					if(this.drawingTypeId=='2'){
						this.Drawdian.content=this.$refs.dianss.content;
						teamdraw.content=JSON.stringify(this.$refs.dianss.content);
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}						}
					if(this.drawingTypeId=='3'){
						this.Drawlantu.content=this.$refs.dianss.content;
						teamdraw.content=JSON.stringify(this.$refs.dianss.content);
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}						}
					if(this.drawingTypeId=='4'){
						this.Drawshangye.content=this.$refs.dianss.content;
						teamdraw.content=JSON.stringify(this.$refs.dianss.content);
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}						}	
					if(this.drawingTypeId=='5'){
						this.Drawyanjiang.content=this.$refs.dianss.content;
						teamdraw.content=JSON.stringify(this.$refs.dianss.content);
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}						}	
					if(this.drawingTypeId=='6'){
						this.Drawfenxi.content=this.$refs.dianss.content;
						teamdraw.content=JSON.stringify(this.$refs.dianss.content);
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}						}	
					if(this.drawingTypeId=='7'){
						this.Drawnaotu.content=localStorage.getItem('Drawnaotu');
						teamdraw.content=this.Drawnaotu.content;
						if(pass==1){
							this.Tuistage.drawingJson[index].content=teamdraw.content;
						}else{
							this.Tuistage.drawingJson.push(teamdraw)
						}						}						
					this.addFormVisible=false;
					this.drawPost(this.teamId,this.drawingTypeId,this.Websorcktdata.teamdraw.content)

				});				
			},		
			TUIwebsorket:function(){
				this.$nextTick(() => {
					var _this=this;
					this.Websorcktdata.teamdraw.teamId=this.teamId;
					this.Websorcktdata.teamdraw.drawingTypeId=this.drawingTypeId;
					var Websorcktpass=0;
					if(_this.Websorcktdata.info!=this.Tuistage.intro){
						_this.Websorcktdata.info=_this.Tuistage.intro;	
						Websorcktpass=1;
					}
					if(this.drawingTypeId=='1'){
						if(_this.Websorcktdata.teamdraw.content!=_this.$refs.dianss.myDiagram.model.toJson()){
							this.Websorcktdata.teamdraw.content=_this.$refs.dianss.myDiagram.model.toJson();
							Websorcktpass=1;
						}			
					}
					if(this.drawingTypeId=='2'){
						
						if(_this.Websorcktdata.teamdraw.content!=JSON.stringify(_this.$refs.dianss.content)){
							_this.Websorcktdata.teamdraw.content=JSON.stringify(_this.$refs.dianss.content);
							Websorcktpass=1;
						}
					}
					if(this.drawingTypeId=='3'){
						
						if(_this.Websorcktdata.teamdraw.content!=JSON.stringify(_this.$refs.dianss.content)){
							_this.Websorcktdata.teamdraw.content=JSON.stringify(_this.$refs.dianss.content);
							Websorcktpass=1;
						}				
					}
					if(this.drawingTypeId=='4'){
						
						if(_this.Websorcktdata.teamdraw.content!=JSON.stringify(_this.$refs.dianss.content)){
							_this.Websorcktdata.teamdraw.content=JSON.stringify(this.$refs.dianss.content);
							Websorcktpass=1;
						}					
					}
					if(this.drawingTypeId=='5'){
						
						if(_this.Websorcktdata.teamdraw.content!=JSON.stringify(_this.$refs.dianss.content)){
							this.Websorcktdata.teamdraw.content=JSON.stringify(this.$refs.dianss.content);
							Websorcktpass=1;
						}					
					}
					if(this.drawingTypeId=='6'){
						
						if(_this.Websorcktdata.teamdraw.content!=JSON.stringify(_this.$refs.dianss.content)){
							this.Websorcktdata.teamdraw.content=JSON.stringify(this.$refs.dianss.content);
							Websorcktpass=1;
						}
					}
					if(this.drawingTypeId=='7'){
						
						if(_this.Websorcktdata.teamdraw.content!=localStorage.getItem('Drawnaotu')){
							this.Websorcktdata.teamdraw.content=localStorage.getItem('Drawnaotu');
							Websorcktpass=1;
						}						
					}	
					if(Websorcktpass==1){
						this.websocketsend(JSON.stringify(this.Websorcktdata));
					}else{
						return
					}								
				});				
			},				
			//作业提交
			Submitwork: function () {
				var _this=this;	
				
				$.each(_this.UnitInfo.vproblems, function(i,res) {
					var oneswer={vproblemId:"",userId:"",courseId:"",answer:"",unitId:""}
					oneswer.vproblemId=res.vproblemId;
					oneswer.userId=res.userId;
					oneswer.courseId=res.courseId;
					if(res.type==3){
						oneswer.answer=res.answer.join(',');
					}else{
						oneswer.answer=res.answer;
					}
					oneswer.unitId=res.unitId;
					_this.answerJson.push(oneswer)
				});
				var param=new URLSearchParams();
				param.append('answerJson',JSON.stringify(_this.answerJson));
				this.$confirm('作业提交之后不能再次修改，确定提交作业吗？', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'								
				}).then(() => {
					courseWorkput(param).then((r) => {
						this.loading=true;
						if(!r.error){
							this.loading=false;
							this.$message({
								message: '作业提交成功',
								type: 'success'
							});
							this.skip('/stucoursecontent',this.$route.query.id);		    								
						}else{
							this.loading=false;
							this.$message({
								message: '提交作业失败',
								type: 'error'
							});										
						}
					}).catch((r)=>{
						this.loading=false;
					})
				});					
			},		
			//沙盘作业提交
			SubmitTuistage: function () {
				var _this = this;            
				if(_this.TuifileList.length<1||_this.Tuiparam!=''){
					this.Tuiparam=new URLSearchParams()
				}
				if(_this.Tuiparam==''){
					this.Tuiparam=new URLSearchParams()
				}
				if(_this.Tuistage.drawingJson.length==0){
					this.$message({                   
						message: '不允许提交空图纸',
						type: 'error'
					});		
					return
				}
				this.Tuiparam.append('drawingJson',JSON.stringify(_this.Tuistage.drawingJson));
				this.Tuiparam.append('teamId',_this.teamId);
				this.Tuiparam.append('inferIntro',_this.Tuistage.intro);
				this.Tuiparam.append('isInferCommitted',_this.Tuistage.isInferCommitted);
				this.$confirm('作业提交之后不能再次修改，确定提交作业吗？', '提示', {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',					
						type: 'warning'								
				}).then(() => {
					courseTuiput(this.Tuiparam).then((r) => {
						this.Tuiloading=true;
						if(!r.error){
							this.Tuiloading=false;
							this.$message({
								message: '作业提交成功',
								type: 'success'
							});
							this.skip('/stucoursecontent',this.$route.query.id);			
							localStorage.setItem('Drawnaotu','');	
						}else{
							this.Tuiloading=false;
							this.$message({
								message: '提交作业失败',
								type: 'error'
							});		
						}
					}).catch(()=>{
						this.Tuiloading=false;
					})
				});		
				
			},	
			//项目路演作业提交
			SubmitRoadstage: function () {
				var _this=this;
				
				if(this.Roadstage.pdfFileList.length==0){
					_this.$message({
						message: '请上传项目路演pdf文档',
						type: 'error'
					});		
					return
				}
				this.Roadparam.append('teamId',_this.teamId);
				this.Roadparam.append('roadIntro',_this.Roadstage.intro);
				this.Roadparam.append('isRoadCommitted',1);
				this.$confirm('作业提交之后不能再次修改，确定提交作业吗？', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'								
				}).then(() => {
					this.Roadloading=true;
					courseRoadput(this.Roadparam).then((r) => {
						if(!r.error){
							this.Roadloading=false;
							this.$message({
								message: '作业提交成功',
								type: 'success'
							});
						this.skip('/stucoursecontent',this.$route.query.id);						
						}else{
							this.Roadloading=false;                            
							this.$message({
								message: '提交作业失败',
								type: 'error'
							});										
						}
					}).catch(()=>{
						this.Roadloading=false;
					})
				});					
			},				
			getStuWorkInfo:function(){
				var _this=this;
				var params={courseId:_this.$route.query.id,userId:_this.$store.state.userId,unitId:_this.$route.query.unitId};
				courseGetworkself(params).then((res)=>{
					_this.stuquestion=res
				})
			},
			getStuSelf:function(){
				var _this= this;
				var params={courseId:this.$route.query.id,userId:localStorage.getItem('userId')}
				courseStudent(params).then((res)=>{
					_this.teamId=res.list[0].teamId;
					_this.teamRole=res.list[0].teamRole;			
					setTimeout(function(){
						courseTeamSelf(_this.teamId).then((result) =>{					
							_this.Tuistage.intro=result.inferIntro;
							_this.Tuistage.inferVideoPath=result.inferVideoPath;
							_this.Tuistage.inferRemark=result.inferRemark;
							_this.Tuistage.inferScore=result.inferScore;
							_this.Roadstage.intro=result.roadIntro;
							_this.Tuistage.drawingJson=result.teamDrawingCommits
							_this.Roadstage.roadRemark=result.roadRemark;
							_this.Roadstage.roadScore=result.roadScore;
							_this.Roadstage.roadPdfPath=result.roadPdfPath;		
							_this.Roadstage.roadVideoPath=result.roadVideoPath;									
							_this.isInferCommitted=result.isInferCommitted;
							if(!result.isInferCommitted){
								_this.initWebSocket(_this.teamId)	
							}
							if(_this.teamRole=='ceo'&&_this.$route.query.stage==3&&!result.isInferCommitted){							
								setInterval(function(){
									_this.TUIwebsorket()
								},100)							
							}	
							_this.isRoadCommitted=result.isRoadCommitted;
							_this.isInferPublished=result.isInferPublished;
							_this.isRoadPublished=result.isRoadPublished;
							if(result.inferVideoPath!=''){
								let onevideo={name:'已上传视频',url:result.inferVideoPath}
             					_this.TuifileList.push(onevideo);	
							}
							if(result.roadVideoPath!=''){
								let onevideo={name:'已上传视频',url:result.roadVideoPath}
             					_this.Roadstage.videoFileList.push(onevideo);	
							}							
								
							$.each(result.teamDrawingCommits, function(e,value) {
								if(value.drawingTypeId=='1'&&value.content!=''){
									_this.Drawtiyan.content=value.content;
								}
								if(value.drawingTypeId=='2'&&value.content!=''){
									_this.Drawdian.content=JSON.parse(value.content);								
								}
								if(value.drawingTypeId=='3'&&value.content!=''){
									_this.Drawlantu.content=JSON.parse(value.content);
								}
								if(value.drawingTypeId=='4'&&value.content!=''){
									_this.Drawshangye.content=JSON.parse(value.content);
								}	
								if(value.drawingTypeId=='5'&&value.content!=''){
									_this.Drawyanjiang.content=JSON.parse(value.content);
								}	
								if(value.drawingTypeId=='6'&&value.content!=''){
									_this.Drawfenxi.content=JSON.parse(value.content);
								}		
								if(value.drawingTypeId=='7'&&value.content!=''){
									localStorage.setItem('Drawnaotu',value.content);		
								}								
							});
						});	
						if(_this.role=='student'&&_this.teamRole=='ceo'&&_this.isInferCommitted!=1){
							_this.Drawdian.use=false;
							_this.Drawfenxi.use=false;
							_this.Drawlantu.use=false;
							_this.Drawshangye.use=false;
							_this.Drawyanjiang.use=false;
							_this.Drawtiyan.use=false;
							_this.Drawnaotu.use=false;							
						}						
					},500)
				})						
			},
		    getUnitInfo:function(){
		    	var _this=this;
		    	coursunitget(_this.$route.query.unitId).then((res)=>{
		    		$.each(res.vproblems, function(e,value) {
		    			value.courseId=_this.$route.query.id;
		    			value.userId=_this.$store.state.userId;
		    			value.unitId=_this.$route.query.unitId;
		    			if(value.type==3){
		    				value.answer=[]
		    			}else{
		    				value.answer=""
		    			}
		    		});
		    		_this.UnitInfo=res;
		    	})
		    },
			getstucourseInfo:function(){
				var params =new URLSearchParams()
				params.append('courseId',this.$route.query.id)
				params.append('unitId',this.$route.query.unitId)
				params.append('userId',this.$store.state.userId)
				var _this=this;
				_this.addProScore=0;
				_this.addScore=0;
				courseStucontent(params).then((res)=>{		
		    		$.each(res.list[0].stageUnit.vproblems, function(e,value) {
		    			value.courseId=_this.$route.query.id;
		    			value.userId=_this.$route.query.userId;
		    			value.unitId=_this.$route.query.unitId;
		    			_this.addProScore+=parseInt(value.score);
		    			if(res.list[0].unitProblems.length>0){
		    				$.each(res.list[0].unitProblems, function(i,result) {
		    					_this.addScore+=parseInt(result.problemScore/_this.addProScore*100);		
								if(value.type==3){
			    					if(value.vproblemId==result.vproblemId){
			    						value.answer=result.answer.split(',');
			    						value.problemScore=result.problemScore;
			    						value.remark=result.remark
			    					}									
								}else{
			    					if(value.vproblemId==result.vproblemId){
			    						value.answer=result.answer;
			    						value.problemScore=result.problemScore;
			    						value.remark=result.remark
			    					}									
								}						
		    				});		    				
		    			}else{
							if(value.type==3){
	    						value.answer=[];
	    						value.problemScore='';
	    						value.remark=''
							}else{
	    						value.answer='';
	    						value.problemScore='';
	    						value.remark=''
							}		    				
		    		}				
		    		});			
		    		this.UnitInfo=res.list[0].stageUnit;
		    		this.Stageinfo=res.list[0];
		    		this.scoreShow=res.list[0].isPublished;
				})			
			},			    
		    getStageInfo:function(){
		    	coursgetstage(this.$route.query.unitId).then((res)=>{
		    		if(this.$route.query.stage==3){
		    			res.name="沙盘推演"
		    		}
		    		if(this.$route.query.stage==4){
		    			res.name="项目路演"
		    		}		    		
		    		this.UnitInfo=res
		    	})
		    },
            initWebSocket(teamId){ //初始化weosocket
                //ws地址
                var _this=this;
                const wsuri = "ws://www.zcxy360.com/sandtable" + "/webSocketServer/"+teamId;
                _this.websock = new WebSocket(wsuri);
				if(_this.teamRole!='ceo'&&_this.$route.query.stage==3){
        	        _this.websock.onmessage = _this.websocketonmessage;					
				}             
            },
            websocketonmessage(e){ //数据接收
            	var _this=this;      	
				if(e!=undefined){
					setTimeout(function(){
		                var redata =JSON.parse(e.data);
		                console.log(redata)
		                _this.Tuistage.intro=redata.info;
						if(redata.teamdraw.drawingTypeId=='1'){
							_this.Drawtiyan.content=redata.teamdraw.content;
						}
						if(redata.teamdraw.drawingTypeId=='2'){
							_this.Drawdian.content=JSON.parse(redata.teamdraw.content);
							return _this.Drawdian
						}
						if(redata.teamdraw.drawingTypeId=='3'){
							_this.Drawlantu.content=JSON.parse(redata.teamdraw.content);
						}
						if(redata.teamdraw.drawingTypeId=='4'){
							_this.Drawshangye.content=JSON.parse(redata.teamdraw.content);
						}	
						if(redata.teamdraw.drawingTypeId=='5'){
							_this.Drawyanjiang.content=JSON.parse(redata.teamdraw.content);
						}	
						if(redata.teamdraw.drawingTypeId=='6'){
							_this.Drawfenxi.content=JSON.parse(redata.teamdraw.content);
						}		
						if(redata.teamdraw.drawingTypeId=='7'){
							localStorage.setItem('Drawnaotu',redata.teamdraw.content);		
						}	
					},500)					
				}
            },
            websocketsend(agentData){//数据发送
                this.websock.send(agentData);
            },
            websocketclose(e){  //关闭
                console.log("connection closed (" + e.code + ")");
            }
	 	},
		mounted() {
			var _this=this;
			this.$nextTick(function(){
				this.Roadparam=new FormData();
				localStorage.setItem('Drawnaotu','');
				setTimeout(function(){
					_this.role=_this.$store.state.role;
					if(_this.$route.query.isCommitted==0){
						_this.stupass=false;
					}else{
						_this.stupass=true;
					}				
					if(_this.$store.state.role!='student'){
						
					    if(_this.$route.query.stage==1||_this.$route.query.stage==2){
							_this.getUnitInfo();		    	
					    }else{
					    	_this.getStageInfo();
					    }						
					}else{
						if(_this.$route.query.stage==1||_this.$route.query.stage==2){
							_this.getstucourseInfo()
						}else{
							_this.getStuSelf()
						}

					}	
				},200)
//					setTimeout(function(){
//						_this.role=_this.$store.state.role;
//						if(_this.$store.state.role=='student'&&_this.$route.query.stage==3||_this.$route.query.stage==4){
//							_this.getStuSelf()
//						}
//					},500)			
		
			})

		}  	 	
	 }
</script>
<style scoped src='../../../static/css/style.css'>
</style>
<style>
	.courselink{
		cursor: pointer;
		font-size: 16px;
		display: block;
	}
	.courselink:hover{
		color:#20a0ff;
	}
	.video-box{
		padding: 0;
		position: relative;
		cursor: pointer;
	}
	.video-box .video-imgbox{
		width: 100%;
		height: 200px;
		overflow: hidden;
	}
	.video-box .iconfont{
		position: absolute;
		width: 100%;
		font-size: 50px;
		color:#fff;
		margin: 0;
		top: 0;
		line-height:200px;
		background:rgba(0,0,0,0.5);
		text-align: center;
		transition: .5s all;
	}
	.video-box:hover .iconfont{
		color:#20a0ff;
		transition: .5s all;
	}
	.coursetags{
		cursor: pointer;
	}
</style>